<template>
    <div class="header">
      <div class="header-logo">
        <img src="../assets/logo.png" alt="Logo" />
      </div>
     
      <div class="header-right">
        <div class="breadcrumb" style="margin: 20px;">
        面包屑
      </div>
    


  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      <el-icon class="el-icon--right"></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="a">个人信息</el-dropdown-item>
        <el-dropdown-item command="b">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>



      </div>
      
    </div>
  </template>
  

 

<script lang="ts" setup>
 // 如果需要动态面包屑导航，可以在这里添加逻辑
import { ElMessage } from 'element-plus'
const handleCommand = (command: string | number | object) => {
  ElMessage(`click on item ${command}`)
}
</script>


  
  <style scoped>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-right {
    display: flex;
    justify-content: space-between;
    align-items: center;


  }


.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
  </style>